<template>
  <div class="gift-card-page">
    <a-card>
      <!-- <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="全部"></a-tab-pane>
        <a-tab-pane key="2" tab="销售中"></a-tab-pane>
        <a-tab-pane key="3" tab="下架中"></a-tab-pane>
        <a-tab-pane key="4" tab="售罄"></a-tab-pane>
      </a-tabs>

      <a-form layout="inline">
        <a-form-item label="添加时间">
          <a-range-picker />
        </a-form-item>
        <a-form-item>
          <a-input-search placeholder="请输入礼品卡ID、货号或名称搜索" style="width: 350px" />
        </a-form-item>
      </a-form> -->
      <div class="table-operator">
        <a-select v-model="exchange_id" :style="{ marginRight: '10px', width: '200px' }" placeholder="请选择">
          <a-select-option v-for="(item, index) in exchangeArray" :key="index" :value="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
        <a-button type="primary" icon="search" @click="handleSearch" :style="{ marginRight: '10px' }">搜索</a-button>
        <a-button v-action:add type="primary" icon="plus" :style="{ marginRight: '10px' }" @click="handleAdd"
          >新增</a-button
        >
        <a-button type="primary" icon="export" @click="handleExport">导出兑换码</a-button>
      </div>

      <a-table rowKey="id" :columns="columns" :pagination="pagination" :data-source="rows">
        <!-- 状态 -->
        <span slot="status" slot-scope="text">
          <a-tag :color="text === 0 ? '#aaa' : 'green'">{{ ['禁用', '可用'][text] }}</a-tag>
        </span>

        <!-- 时间 -->
        <span slot="start_time" slot-scope="text">{{ formatDate(text) }}</span>
        <span slot="end_time" slot-scope="text">{{ formatDate(text) }}</span>
        <span slot="createtime" slot-scope="text">{{ formatDate(text) }}</span>

        <!-- 操作 -->
        <span slot="action" slot-scope="text, item">
          <a v-action:delete @click="handleDelete(item)">删除</a>
        </span>
      </a-table>
    </a-card>

    <AddForm ref="AddForm" :categoryList="rows" @handleSubmit="initData" />
  </div>
</template>
<script>
import * as Api from '@/api/gift'
import * as Exchange from '@/api/gift'
import AddForm from './modules/AddForm'
import moment from 'moment'
export default {
  components: {
    AddForm,
  },
  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: '兑换码',
          dataIndex: 'code',
        },
        {
          title: '开始时间',
          dataIndex: 'start_time',
          scopedSlots: { customRender: 'start_time' },
        },
        {
          title: '结束时间',
          dataIndex: 'end_time',
          scopedSlots: { customRender: 'end_time' },
        },
        {
          title: '添加时间',
          dataIndex: 'createtime',
          scopedSlots: { customRender: 'createtime' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      rows: [],
      exchangeArray: [],
      exchange_id: '',
      pagination: {
        current: 1,
        pageSize: 15,
        total: 0,
        showTotal: (total) => `共 ${total} 条记录`,
        onChange: (page, pageSize) => {
          this.pagination.current = page
          this.pagination.pageSize = pageSize
          this.initData()
        },
      },
    }
  },

  mounted() {
    this.initExchange()
  },

  methods: {
    initData() {
		console.log(1111)
      // 获取分类列表
      Api.list({
        page: this.pagination.current,
        exchange_id: this.exchange_id,
      }).then((result) => {
        this.rows = result.data.list.data
        this.pagination.total = result.data.list.total
      })
    },

    initExchange() {
      Exchange.exchange({
        page: 1,
      }).then(({ data }) => {
        this.exchangeArray = data.list.data
        this.exchange_id = data.list.data[0].id
        this.initData()
      })
    },

    // 导出兑换码
    handleExport() {
		let columns = ['id', 'code', 'start_time', 'end_time', 'status'];
      Exchange.exportData({
        exchange_id: this.exchange_id,
        columns: columns,
      }).then(({ data }) => {
		  window.open(data.path);
	  })
    },

    handleSearch() {
      this.pagination.current = 1
      this.initData()
    },

    // 删除
    handleDelete(item) {
      const self = this
      const modal = this.$confirm({
        title: '您确定要删除该数据吗?',
        content: '删除后不可恢复',
        onOk() {
          return Api.deleted({ codeIds: item['id'] })
            .then((result) => {
              self.$message.success(result.message, 1.5)
              self.initData()
            })
            .finally((result) => modal.destroy())
        },
      })
    },

    // 新增
    handleAdd() {
      this.$refs.AddForm.add()
    },

    // 时间格式化
    formatDate(time) {
      return moment(time * 1000).format('YYYY-MM-DD HH:mm')
    },
  },
}
</script>
